/**
 * Created by chuchu on 2016/9/19.
 */
$(function(){
    function sld(){
        var sliderBox = $('#slider-box');
        var sliderUl = sliderBox.find("ul")[0];
        var sliderOl = sliderBox.find("ol")[0];
        var arrBox = $("#arr");
        var arrL = arrBox.children("span")[0];
        var arrR = arrBox.children("span")[1];
        //获取图片个数
        var count = $(sliderUl).children("li").length;
        //获取图片宽度
        var boxWidth = sliderBox.width();
        //克隆第一张图片放到最后
        $(sliderUl).append($($(sliderUl).children()[0]).clone(true))
        //设置一个索引
        var index = 0;
        var olIndex;
        //列表点点的点击事件
        $(sliderOl).children("li").on("click", function(){
            $(this).addClass("active").siblings().removeClass("active");
            $(sliderUl).animate({
                "left":-$(this).index()*boxWidth
            });
            index = $(this).index();
        })
        //点击下一张
        console.log($(arrR));
        $(arrR).click(function(){
            if(index >= count){
                index = 0;
                $(sliderUl).css("left",-index*boxWidth)
            }
            index++;
            $(sliderUl).animate({
                "left":-index*boxWidth
            },1000)
            olIndex = index;
            if(index == count){
                olIndex = 0;
            }
            $(sliderOl).children("li").eq(olIndex).addClass("active").siblings().removeClass("active");
        })
        //点击上一张
        $(arrL).click(function(){
            if(index <= 0){
                index = count;
                $(sliderUl).css("left",-index*boxWidth)
            }
            index--;
            $(sliderUl).animate({
                "left":-index*boxWidth
            },1000)
            olIndex = index;
            $(sliderOl).children("li").eq(olIndex).addClass("active").siblings().removeClass("active");
        })
        //设置定时轮播
        clearInterval(timerId);
        var timerId = setInterval(function(){
            $(arrR).trigger("click");
        },2000)
        //鼠标移入 定时器停止
        $('#slider-box').on("mouseenter", function(){
            clearInterval(timerId);
        })
        //鼠标移开 定时器重新开始
        $('#slider-box').on("mouseleave", function(){
            clearInterval(timerId);
            timerId = setInterval(function(){
                $(arrR).trigger("click");
            },2000)
        })
    }

    sld();
})